@extends('layouts.app')

@section('content')
    <!--顶部-->
		<div data-options="region:'center',iconCls:'icon-ok'">
			<div class="main-content">
	            <div class="btn-toolbar list-toolbar">
	            	<div id="shili_tb1" class="easyui-window" closed="true">
	            		<h2 class="text-center mg_b36">单位动态信息统计表（治安保卫重点单位）</h2>
	                    <div id="main" style="height:600px;width:900px;margin: 0 auto;"></div>
	            		
	            	</div>
	                <div class="form-all mg_t100">
	                	 <div class="chart_btns">
	                	 	<button class="btn btn-default " id="tjt">查看统计图</button>
	                	 </div>
	                    <table class="table-form table-border w mg-auto tongjitu_tb" id="dd_tb" style="margin-top: 30px;">
							<thead>
								<tr>
									<th colspan="13">单位动态信息统计表</th>
								</tr>
							</thead>
							<tbody>
								<tr class="thead thead2">
									<td rowspan="2" width="10%">&nbsp;&nbsp;&nbsp;&nbsp;行业类别<br />所在区域</td>
									<td colspan="12">治安保卫重点单位</td>
								</tr>
								<tr id="tit">
									<td>重点要害部位</td>
									<td>保卫人员</td>
									<td>重点人员</td>
								</tr>
								<tr id="tr_count">
									<td>总数</td>
									<td><input type="text" disabled/></td>
									<td><input type="text" disabled/></td>
									<td><input type="text" disabled/></td>
								</tr>
							</tbody>
						</table>
						<script>
							function tab_data(){
								console.log(main_data);
								for(var i=0;i<main_data.length;i++){
									var inner_data = '<tr class="data_tr">'+
														 '<td>'+main_data[i].quju+'</td>'+
														 '<td><input type="text" value="'+main_data[i].dt[0]+'" disabled/></td>'+
														 '<td><input type="text" value="'+main_data[i].dt[1]+'" disabled/></td>'+
														 '<td><input type="text" value="'+main_data[i].dt[2]+'" disabled/></td>'+
													 '</tr>'
									$("#tit").after(inner_data)
								}
								var count1 = 0;
								for(var i=0;i<3;i++){
									for(var j=0;j<main_data.length;j++){
										count1 += main_data[j].dt[i];
										$("#tr_count").find("td").eq(i+1).find("input").val(count1);
									}
									count1 = 0;
								}
							}
						</script>
	                    <!--<h2 class="text-center mg_b36">单位动态信息统计表（保安从业单位）</h2>
	                    <div class="chart_btns">
	                	 	<button class="btn btn-default " id="btn4">省</button>
	                	 	<button class="btn btn-default " id="btn5">市</button>
	                	 	<button class="btn btn-default " id="btn6">区</button>
	                	 </div>
	                    <div id="main2" style="height:600px;width:1200px;margin: 0 auto;"></div>-->
	              </div>
	            </div>
	        </div>
		</div>

<script src="{{ URL::asset('/') }}build/dist/echarts.js"></script>
<script src="{{ URL::asset('/') }}/build/zhuti.js"></script>
<script type="text/javascript">
		
		$("#tjt").click(function(){
        	$('#shili_tb1').window({
				title: "编辑",
				width:'900',
				height:'600',
				top:($(window).height() - 600) * 0.5,   
				left:($(window).width() - 900) * 0.5,
				modal: true,
				closed: false,
				minimizable:false
			});
    	})
	
	var myChart1 = echarts.init(document.getElementById('main'),'zhuti');
	
	var dwData1 = [
					{"quju":"武汉","dt":[17, 15, 5]},
					{"quju":"鄂州","dt":[12, 18, 13]},
					{"quju":"黄石","dt":[24, 12, 18]},
					{"quju":"十堰","dt":[32, 17, 13]},
					{"quju":"襄阳","dt":[11, 15, 17]},
					{"quju":"恩施","dt":[12, 16, 13]},
					{"quju":"荆门","dt":[12, 16, 13]},
					{"quju":"公安","dt":[12, 16, 13]},
					{"quju":"老河口","dt":[14, 12, 18]},
					{"quju":"云梦","dt":[14, 12, 18]}
				];
	/*var dwData1 = [
					{"quju":"武汉","dt":[17, 15, 5, 18, 9, 3]},
					{"quju":"鄂州","dt":[12, 18, 13, 14,16, 19]},
					{"quju":"黄石","dt":[24, 12, 18, 13, 14, 18]},
					{"quju":"十堰","dt":[32, 17, 13, 12, 14, 16]},
					{"quju":"襄阳","dt":[11, 15, 17, 19, 12, 14]},
					{"quju":"恩施","dt":[12, 16, 13, 18, 14, 2]},
					{"quju":"荆门","dt":[12, 16, 13, 18, 14, 12]},
					{"quju":"公安","dt":[12, 16, 13, 18, 14, 2]},
					{"quju":"老河口","dt":[14, 12, 18, 13, 14, 8]},
					{"quju":"云梦","dt":[14, 12, 18, 13, 14, 8]}
				];*/
				var main_data = [];
				var type_data = [];
				var dt = [];
				function tb_count(id){
					main_data = [];
					type_data = [];
					dt = [];
					$.ajax({
						type:"POST",
						url:"{{url('admin/tj/dwdtajax')}}",
						data: {'id':id, '_token':'{{csrf_token()}}'},
						dateType: 'json',
		                success : function(data){
		                	var obj = jQuery.parseJSON(data);
        					console.log("ajax数据");
        					console.log(obj);
        					for(var i=0;i<obj.hq.length;i++){
        						type_data.push(obj.hq[i].area_name)
        					}
        					for(var i=0;i<obj.hq.length;i++){
        						main_data.push({"quju":obj.hq[i].area_name, "dt":[]})
        					}
        					console.log(main_data);
        					for(var i=0;i<obj.hq.length;i++){
        						main_data[i].dt=[obj.hq[i].zdbw, obj.hq[i].bwry, obj.hq[i].zdry];
        					}
        					
		                }
					});
				}
				
				function load_data(id){
		         	  myChart1.clear();
		              tb_count(id);
		              setTimeout(function(){
		                var dwData = main_data;
		                option = {};
		                tab_data();
		                tb1(dwData);
		                myChart1.setOption(option);
		              },600)
		        }
				
				//载入初始化数据
      			load_data('0');
				
				function load_city_data_from_menu(id){
					$(".data_tr").remove()
					load_data(id);
	    		}
	    		function load_area_data_from_menu(id){
					$(".data_tr").remove()
					load_data(id);
				}
				function load_org_data_from_menu(id){
					$(".data_tr").remove()
					load_data(id);
				}
				
				
				
	function ooName(dwData){
			var data = [];
			for(var w=0;w<dwData.length;w++){
				data.push(dwData[w].quju);
			}
			return data;
		};
					
	function count1(dwData){
		var darr = [];
		var count = '';
		for(var w=0;w<dwData[0].dt.length;w++){
			
			for(var c1=0;c1<dwData.length;c1++){
				count = count + dwData[c1].dt[w]-0;
			}
			darr[w] = count;
			count = 0;
		}
		return darr;
	};			
	function oodata(dwData){
		var ddata = [];
		for(var d=0;d<dwData.length;d++){
			var cache = {name:dwData[d].quju,type:'bar',stack: '数据',data:dwData[d].dt,barWidth : 50}
			ddata.push(cache);
		}
		ddata.push({name:'总数',type:'bar',stack: '数据',itemStyle:{normal:{opacity: 0}},data:count1(dwData)})
		return ddata;
		}
		
	function tb1(dwData){
		 var option = {
					    tooltip : {
					        trigger: 'axis',
					        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					        }
					    },
					    legend: {
					        data:ooName(dwData)
					    },
					    grid: {
					        left: '3%',
					        right: '4%',
					        bottom: '3%',
					        containLabel: true
					    },
					    xAxis : [
					        {
					            type : 'category',
					            data : ['重点要害部位','保卫人员','重点人员'/*,'情报信息','工作动态','抓获现行'*/]
					        }
					    ],
					    yAxis : [
					        {
					            type : 'value',
					            max:200      //最大值
					        }
					    ],
					    series : oodata(dwData)
					
		 };
					
					
		// 使用刚指定的配置项和数据显示图表。
		myChart1.setOption(option);
	}
	
	
</script>

<script type="text/javascript">
	
	/*var myChart2 = echarts.init(document.getElementById('main2'),'zhuti');
	
	var dwData4 = [
					{"quju":"武汉","dt":[11, 13, 15, 18, 9, 13]},
					{"quju":"鄂州","dt":[11, 12, 11, 14,16, 19]},
					{"quju":"黄石","dt":[13, 22, 15, 12, 12, 18]},
					{"quju":"十堰","dt":[14, 27, 12, 11, 12, 16]},
					{"quju":"襄阳","dt":[15, 15, 11, 12, 15, 14]},
					{"quju":"恩施","dt":[12, 36, 12, 13, 16, 12]},
					{"quju":"荆门","dt":[12, 12, 13, 18, 14, 12]},
					{"quju":"公安","dt":[12, 16, 16, 18, 14, 12]},
					{"quju":"老河口","dt":[14, 12, 18, 13, 14, 18]},
					{"quju":"云梦","dt":[14, 12, 18, 13, 14, 8]}
				];
	var dwData5 = [
					{"quju":"武昌区","dt":[17, 15, 5, 18, 9, 3]},
					{"quju":"洪山区","dt":[16, 18, 12, 14,16, 9]},
					{"quju":"江岸区","dt":[14, 13, 13, 13, 14, 8]},
					{"quju":"江汉区","dt":[12, 12, 14, 12, 14, 6]},
					{"quju":"硚口区","dt":[11, 11, 21, 12, 12, 4]},
					{"quju":"汉阳区","dt":[12, 11, 13, 11, 14, 2]},
					{"quju":"青山区","dt":[12, 11, 13, 18, 14, 2]},
					{"quju":"中心城区","dt":[11, 16, 13, 18, 14, 2]},
					{"quju":"东西湖区","dt":[11, 12, 18, 13, 14, 8]},
					{"quju":"蔡甸区","dt":[14, 12, 18, 13, 14, 8]},
					{"quju":"江夏区","dt":[14, 12, 18, 13, 14, 8]},
					{"quju":"黄陂区","dt":[14, 12, 18, 13, 14, 8]},
					{"quju":"新洲区","dt":[14, 12, 18, 13, 14, 8]}
				];
	var dwData6 = [
					{"quju":"关南派出所","dt":[27, 15, 5, 11, 9, 13]},
					{"quju":"关东派出所","dt":[26, 18, 13, 15,16, 19]},
					{"quju":"白沙洲市场派出所","dt":[24, 22, 18, 15, 14, 28]},
					{"quju":"北港派出所","dt":[12, 17, 13, 15, 14, 26]},
					{"quju":"和平派出所","dt":[11, 15, 27, 19, 12, 24]},
					{"quju":"梨园派出所","dt":[12, 16, 13, 18, 14, 22]},
					{"quju":"珞南派出所","dt":[12, 16, 23, 18, 14, 22]},
					{"quju":"马房山派出所","dt":[12, 16, 23, 18, 14, 22]},
					{"quju":"南湖派出所","dt":[14, 12, 28, 13, 14, 8]},
				];
		  var dwData = dwData4;
		  tb2(dwData);
		  $("#btn4").click(function(){
		  			myChart2.clear();
					var dwData = dwData4;
					option = {};
					tb2(dwData);
					myChart2.setOption(option);
				})
				$("#btn5").click(function(){
					myChart2.clear();
					var dwData = dwData5;
					option = {};
					tb2(dwData);
					myChart2.setOption(option);
				})
				$("#btn6").click(function(){
					myChart2.clear();
					var dwData = dwData6;
					option = {};
					tb2(dwData);
					myChart2.setOption(option);
				})
				
	function ooName1(dwData){
			var data = [];
			for(var w=0;w<dwData.length;w++){
				data.push(dwData[w].quju);
			}
			return data;
		};
		ooName1(dwData);			
	function count2(dwData){
		var darr = [];
		var count = '';
		for(var w=0;w<dwData[0].dt.length;w++){
			
			for(var c1=0;c1<dwData.length;c1++){
				count = count + dwData[c1].dt[w]-0;
			}
			darr[w] = count;
			count = 0;
		}
		return darr;
	};	
	function oodata1(dwData){
		var ddata = [];
		for(var d=0;d<dwData.length;d++){
			var cache = {name:dwData[d].quju,type:'bar',stack: '数据',data:dwData[d].dt,barWidth : 50}
			ddata.push(cache);
		}
		ddata.push({name:'总数',type:'bar',stack: '数据',itemStyle:{normal:{opacity: 0}},data:count2(dwData)})
		return ddata;
		}
		oodata1(dwData);			
 function tb2(dwData){
 	option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data:ooName1(dwData)
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['保安服务区域','保安员','重点人员','情报信息','工作动态','抓获现行']
        }
    ],
    yAxis : [
        {
            type : 'value',
            max:300      //最大值
        }
    ],
    series : oodata1(dwData)
};
	
	// 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option);
 }*/

</script>
@stop